<template>
    <el-col :span="18">
      <el-button size="small" icon="el-icon-circle-plus" type="success" @click="dialogVisible = true" round>新问题</el-button>
      <el-table
        :data="issues"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="序号"
          width="80">
          <template slot-scope="scope">
            <router-link :to="{ name: 'Issue', query: { id: scope.row.id, project_id: project_id }}">{{ scope.row.id }}</router-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          width="200">
          <template slot-scope="scope">
            <router-link :to="{ name: 'Issue', query: { id: scope.row.id, project_id: project_id }}">{{ scope.row.title }}</router-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="90">
        </el-table-column>
        <el-table-column
          prop="priority"
          label="优先级"
          width="60">
        </el-table-column>
        <el-table-column
          prop="assigner"
          label="指派给"
          width="120">
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="创建时间"
          width="120">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="新问题"
        :visible.sync="dialogVisible"
        width="80%"
        :before-close="handleClose">
          
          <el-form :model="form" :rules="rules" ref="issueForm" label-width="100px">
            <el-form-item label="标题" prop="title">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="desc">
              <el-input 
              type="textarea"
              :rows="6" 
              v-model="form.desc">
                
              </el-input>
            </el-form-item>

            <el-col :span="12" style="padding-left: 0px;">
              <el-form-item label="类型">
                <el-select v-model="form.type" placeholder="任务类型">
                  <el-option v-for="(label, value) in types" :key="value" :label="label" :value="value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" style="padding-left: 0px;">
              <el-form-item label="状态">
                <el-select v-model="form.status" placeholder="任务状态">
                  <el-option v-for="(label, value) in status" :key="value" :label="label" :value="value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12" style="padding-left: 0px;">
              <el-form-item label="优先级">
                <el-select v-model="form.priority" placeholder="优先级">
                  <el-option v-for="(label, value) in priorities" :key="value" :label="label" :value="value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12" style="padding-left: 0px;">
              <el-form-item label="指派给">
                <el-autocomplete
                  v-model="form.assigner_user_id"
                  :fetch-suggestions="querySearch"
                  placeholder="指派给"
                  :trigger-on-focus="false"
                  @select="userAssign"
                ></el-autocomplete>
              </el-form-item>
            </el-col>

            
            <el-col :span="12" style="padding-left: 0px;">
              <el-form-item label="开始日期">
                <el-date-picker type="date" placeholder="开始日期" v-model="form.start_date" style="width: 60%;"></el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="12" style="padding-left: 0px;">
              <el-form-item label="结束日期">
                <el-date-picker type="date" placeholder="结束日期" v-model="form.end_date" style="width: 60%;"></el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="12" style="padding-left: 0px;">
              <el-form-item label="预估时间" prop="expect_hour">
                <el-input v-model="form.expect_hour"><template slot="append">小时</template></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12" style="padding-left: 0px;">
              <el-form-item label="父任务" prop="p_id">
                <el-input v-model="form.p_id"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12" style="padding-left: 0px;">
              <el-form-item label="附件" prop="p_id">
                <el-upload
                  class="upload-demo"
                  action="api/attach/upload"
                  :on-change="handleChange"
                  :file-list="fileList">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </el-form-item>
            </el-col>

          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogVisible = false">取 消</el-button>
            <el-button size="small" type="primary" @click="submitForm('issueForm')">确 定</el-button>
          </span>
        </el-dialog>
    </el-col>
</template>

<script>
  export default {
    data () {
      return {
        dialogVisible: false,
        form: {
          title: '',
          desc: '',
          type: '',
          status: '',
          priority: '',
          assigner_user_id: '',
          start_date: '',
          end_date: '',
          expect_hour: '',
          p_id: '',
          attaches: []
        },
        rules: {
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' },
            { min: 3, max: 256, message: '长度在 3 到 256 个字符', trigger: 'blur' }
          ]
        },
        types: [],
        envs: [],
        status: [],
        priorities: [],
        issues: [],
        members: [],
        fileList: [],
        project_id: this.$route.query.id
      }
    },
    methods: {
      handleClose (done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done()
          })
          .catch(_ => {})
      },
      querySearch (queryString, cb) {
        // var members = this.members
        // var m = {}
        // for (let member in members) {
        //   m = member
        // }
        // console.log(m)
        var result = [{'value': queryString}]
        cb(result)
        console.log(this.form.assigner_user_id)
      },
      userAssign (item) {
        console.log(item)
      },
      handleChange (file, list) {
        console.log(file)
        this.fileList = list.slice(-3)
      },
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.postData()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      postData () {
        const page = this
        window.axios.post('api/issue/add', {
          project_id: this.$route.query.id,
          title: this.form.title,
          desc: this.form.desc,
          type: this.form.type,
          status: this.form.status,
          priority: this.form.priority,
          assigner_user_id: this.form.assigner_user_id,
          expect_hour: this.form.expect_hour,
          start_date: this.form.start_date,
          end_date: this.form.end_date,
          p_id: this.form.p_id
        })
        .then(function (response) {
          page.$message.success('任务已新增')
          page.dialogVisible = false
        })
        .catch(function (error) {
          console.log(error)
        })
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
      }
    },
    filters: {
      userFilter: function (value) {
        console.log(value)
      }
    },
    mounted: function () {
      const page = this
      const projectId = this.$route.query.id
      window.axios.get('api/issue/config?project_id=' + projectId, {
      })
      .then(function (response) {
        page.types = response.data.types
        page.status = response.data.status
        page.envs = response.data.envs
        page.priorities = response.data.priorities
        page.members = response.data.members
      })
      .catch(function (error) {
        console.log(error)
      })

      window.axios.get('api/issue/list?project_id=' + projectId, {
      })
      .then(function (response) {
        page.issues = response.data
        console.log(response.data)
      })
      .catch(function (error) {
        console.log(error)
      })
    }
  }
</script>
